<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<div class="right-panel-search">
					<el-input v-model="search.realName" placeholder="姓名" clearable></el-input>
					<el-date-picker v-model="search.loginTime" type="datetimerange" value-format="x" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts"></el-date-picker>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
				</div>
			</div>
			<div class="right-panel">

			</div>
		</el-header>
		<el-main class="nopadding">
			<m-table ref="tableRef" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
				<el-table-column type="selection" min-width="50"></el-table-column>
				<el-table-column label="#" type="index" min-width="50"></el-table-column>
				<el-table-column label="姓名" prop="realName" min-width="90"></el-table-column>
				<el-table-column label="登录 IP" prop="ip" min-width="100"></el-table-column>
				<el-table-column label="登录地址" prop="address" width="130"></el-table-column>
				<el-table-column label="操作系统" prop="os" min-width="100"></el-table-column>
				<el-table-column label="浏览器" prop="browser" min-width="100"></el-table-column>
				<el-table-column label="登录时间" prop="loginTime" min-width="120"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="120">
					<template #default="scope">
						<el-button-group>
							<el-popconfirm title="确定强退该用户吗？" @confirm="tableDel(scope.row)">
								<template #reference>
									<el-button text type="danger" icon="el-icon-delete" size="small"
										:disabled="token == scope.row.token">强退</el-button>
								</template>
							</el-popconfirm>
						</el-button-group>
					</template>
				</el-table-column>
			</m-table>
		</el-main>
	</el-container>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useOnlineUserPage, useKickOut } from '@/api/system/online'
import MTable from '@/components/MTable/index.vue'
import store from '@/store'

const search = reactive({
	realName: null,
	loginTime: null,
})
const apiObj = ref(useOnlineUserPage)
const selection = ref([])
const tableRef = ref()
const token = store.userStore.token


//删除
const tableDel = async (row: any) => {
	var res: any = await useKickOut(row.token);
	if (res.code == 0) {
		tableRef.value.refresh()
		ElMessage.success("删除成功")
	} else {
		ElMessageBox.alert(res.message, "提示", { type: 'error' })
	}
}

//表格选择后回调事件
const selectionChange = (data: any) => {
	selection.value = data;
}

//搜索
const upsearch = () => {
	console.log(search)
	tableRef.value.upData({...search})
}

const shortcuts = [
  {
    text: '今日',
    value: [new Date().setHours(0,0,0,0), new Date()],
  },
  {
    text: '今年',
    value: () => {
      const end = new Date()
      const start = new Date(new Date().getFullYear(), 0)
      return [start, end]
    },
  },
  {
    text: '近半年',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 6)
      return [start, end]
    },
  },
]
</script>

<style></style>
